<template>
  <div>
    <Row>
      <i-col span="24">
        <Card>
          <Button class="opt-btn" @click="showAddModal" type="primary">添加</Button>
          <Dropdown class="opt-btn" @on-click="batchOpt">
            <Button type="primary">
              批量操作
              <Icon type="ios-arrow-down"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem name="batchActive">批量激活</DropdownItem>
              <DropdownItem name="batchInactive">
                <span style="color: red;">批量冻结</span>
              </DropdownItem>
              <DropdownItem name="batchRemove" divided>
                <span style="color: red;">批量删除</span>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
          <Button class="opt-btn" @click="showSearchModal" type="primary">高级搜索</Button>
          <Tooltip class="opt-btn" content="刷新" placement="right">
            <Button icon="md-refresh" type="success" shape="circle" @click="searchTable(false)"></Button>
          </Tooltip>
                    <Tooltip class="opt-btn" content="重置搜索" placement="right">
                        <Button icon="md-repeat" type="success" shape="circle" @click="researchTable"></Button>
                    </Tooltip>
          <GoodsOrderTableMain
            ref="table"
            v-on:searchTable="searchTable"
            v-on:showEditModal="showEditModal"
            v-on:showDetailModal="showDetailModal"
            v-on:showAttrDetailModal="showAttrDetailModal"
            v-on:showSearchTableModal="showSearchTableModal"
            v-on:showDeliverGoods="showDeliverGoods"
            v-on:showOrderItem="showOrderItem"
          />
        </Card>
      </i-col>
    </Row>
    <GoodsOrderAddEditModal ref="addEditModal" v-on:add="add" v-on:edit="edit" />
    <GoodsOrderSearchModal ref="searchModal" v-on:searchTable="searchTable" />
    <GoodsOrderDetailModal ref="detailModal" />
    <UserDetailDetailModal ref="attrDetailmodal" />
    <Modal v-model="modal.searchTableModal" title="选择查询条件" :mask-closable="false" width="1020">
      <UserDetailMainSingle ref="searchTableModal" v-on:confirmChoice="confirmChoice" />
      <div slot="footer">
        <Button type="text" size="large" @click="cancelModal('searchTableModal')">取消</Button>
        <Button type="primary" size="large" @click="bottomConfirmChoice">确认选择</Button>
      </div>
    </Modal>

    <!-- 物流详情 -->
    <GoodsOrderDeliveryDetailModal
      ref="goodsOrderDeliveryDetailModal"
      v-on:showDeliveryLogistics="showDeliveryLogistics"
    />
    <GoodsOrderLogisticsDeliverModal ref="deliveryModal" v-on:deliveryGoods="deliveryGoods" />

    <!-- 查看订单项 -->
    <Modal v-model="modal.orderItemModal" title="查看订单项" :mask-closable="false" width="1020">
      <GoodsOrderItemMainSingle ref="goodsOrderItem" />
      <div slot="footer">
        <Button type="text" size="large" @click="cancelModal('orderItemModal')">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as utils from '@/api/utils-v2'
import * as ResponseStatus from '@/api/response-status'
import GoodsOrderTableMain from './GoodsOrderTableMain.vue'
import GoodsOrderAddEditModal from './GoodsOrderAddEditModal.vue'
import GoodsOrderSearchModal from './GoodsOrderSearchModal.vue'
import GoodsOrderDetailModal from './GoodsOrderDetailModal.vue'
import UserDetailDetailModal from '../user-detail/UserDetailDetailModal.vue'
import UserDetailMainSingle from '../user-detail/UserDetailMainSingle.vue'
import GoodsOrderDeliveryDetailModal from './GoodsOrderDeliveryDetailModal.vue'
import GoodsOrderLogisticsDeliverModal from './GoodsOrderLogisticsDeliverModal.vue'
import GoodsOrderItemMainSingle from '../goods-order-item/GoodsOrderItemMainSingle.vue'
export default {
  name: 'GoodsOrderMain',
  components: {
    GoodsOrderTableMain,
    GoodsOrderAddEditModal,
    GoodsOrderSearchModal,
    GoodsOrderDetailModal,
    UserDetailDetailModal,
    UserDetailMainSingle,
    GoodsOrderDeliveryDetailModal,
    GoodsOrderLogisticsDeliverModal,
    GoodsOrderItemMainSingle
  },
  data() {
    return {
      urls: {
        batchRemoveUrl: '/goods-order/admin/batch-remove',
        batchActiveUrl: '/goods-order/admin/batch-active',
        oneUserUrl: '/user-detail/admin/one/',
        deliveryUrl: '/goods-order/admin/delivery/'
      },
      modal: {
        searchTableModal: false,
        orderItemModal: false
      }
    }
  },
  computed: {},
  mounted() {},
  methods: {
    searchTable(reset) {
      utils.search(this, reset)
    },
    researchTable() {
        this.$refs.searchModal.resetForm()
        setTimeout(() => {
            utils.search(this, true)
        }, 10);
    },
    showAddModal() {
      let addEditModal = this.$refs.addEditModal
      addEditModal.modal.add = true
    },
    add() {
      utils.add(this)
    },
    showEditModal(row) {
      let addEditModal = this.$refs.addEditModal
      addEditModal.modal.edit = true
      row.version = null
                row.createTime = null
                row.updateTime = null
                addEditModal.form = row
    },
    edit() {
      utils.edit(this)
    },
    showDetailModal(row) {
      let detailModal = this.$refs.detailModal
      detailModal.modal.detail = true
      detailModal.form = row
	  detailModal.getDictItemsDisplayValue()
    },
    showSearchModal() {
      let searchModal = this.$refs.searchModal
      searchModal.modal.search = true
    },
    batchOpt(itemName) {
      if (itemName === 'batchActive') {
        utils.batchActive(this, 0)
      } else if (itemName === 'batchInactive') {
        utils.batchActive(this, 1)
      } else if (itemName === 'batchRemove') {
        utils.batchRemove(this)
      }
    },
    showModal(modal) {
      utils.showModal(this, modal)
    },
    cancelModal(modal) {
      utils.cancelModal(this, modal)
    },
    /**
     * 显示详情弹窗
     */
    showAttrDetailModal(id) {
      let url = this.urls.oneUserUrl
      utils
        .doGet(url + id, {})
        .then(res => {
          if (ResponseStatus.OK === res.data.code) {
            const row = res.data.data
            let detailModal = this.$refs.attrDetailmodal
            detailModal.modal.detail = true
            detailModal.form = row
          } else {
            this.$Message.error(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    /**
     * 显示搜索弹窗
     */
    showSearchTableModal(type) {
      this.showModal('searchTableModal')
      let searchTableModal = this.$refs.searchTableModal
      searchTableModal.searchTable()
    },
    /**
     * 底部的确认选择
     */
    bottomConfirmChoice() {
      this.$refs.searchTableModal.confirmSelection()
    },
    /**
     * 确认选择
     */
    confirmChoice(row) {
      this.cancelModal('searchTableModal')
      let searchModal = this.$refs.searchModal
      searchModal.searchForm.userIdMin = searchModal.searchForm.userIdMax =
        row.id
      this.searchTable()
    },
    /**
     * 发货显示发货详情，包括购买的订单项和物流信息
     */
    showDeliverGoods(row) {
      let detailModal = this.$refs.goodsOrderDeliveryDetailModal
      if (row.orderStatus === 3) {
        // 待发货
        detailModal.canDeliver = true
      }
      utils
        .doGet('/goods-order-logistics/admin/one/' + row.id, {})
        .then(res => {
          if (res.data.code === ResponseStatus.OK) {
            detailModal.modal.detail = true
            detailModal.form = res.data.data
            detailModal.form.orderNo = row.orderNo
            detailModal.getDictItemsDisplayValue()
          }
        })
        .catch(err => {
          console.log('获取物流信息异常')
        })
        detailModal.orderItemsTable.loading = true
        utils.doPostJson('/goods-order-item/admin/all-cond', {
          orderId: row.id
        }, {}).then(response => {
          if (response.data.code === ResponseStatus.OK) {
            detailModal.orderItemsTable.loading = false
            detailModal.orderItemsTable.tableRows = response.data.data.rows
          }
        }).catch(error => {
          detailModal.orderItemsTable.loading = false
        })
    },
    /**
     *  显示确认发货的模态窗
     */
    showDeliveryLogistics(row) {
      let deliveryModal = this.$refs.deliveryModal
      deliveryModal.modal.delivery = true
      deliveryModal.form = row
    },
    /**
     * 发货
     */
    deliveryGoods(form) {
      if (!form.logisticsCompany) {
        this.$Message.error('请选择物流公司')
        return
      }
      if (!form.logisticsNo) {
        this.$Message.error('请输入物流单号')
        return
      }
      utils
        .doPostJson(this.urls.deliveryUrl + form.id, form, {})
        .then(res => {
          if (ResponseStatus.OK === res.data.code) {
            this.$Message.success('发货成功')
            let deliveryModal = this.$refs.deliveryModal
            deliveryModal.modal.delivery = false
            let detailModal = this.$refs.goodsOrderDeliveryDetailModal
            detailModal.modal.detail = false
            this.searchTable()
          } else {
            this.$Message.error(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    /**
     * 查看订单项
     */
    showOrderItem(row) {
      let goodsOrderItem = this.$refs.goodsOrderItem
      let searchModal = goodsOrderItem.$refs.searchModal
      searchModal.searchForm.orderId = row.id
      goodsOrderItem.searchTable()
      this.showModal('orderItemModal')
    }
  }
}
</script>

<style>
</style>
